import {createRouter, createWebHistory} from 'vue-router';
// 1. 定义路由组件， 注意，这里一定要使用 文件的全名（包含文件后缀名）

import BaseLayout from "../layout/baseLayout.vue";
import ShopLayout from "../layout/shopLayout.vue";
import Index from "../views/Index.vue";
import Register from "../views/Register.vue";
import Login from "../views/Login.vue";
import ShopIndex from "../views/shop/Index.vue";
import GoodsInfo from "../views/shop/Info.vue";
import CategoriesIndex from "../views/categories/Index.vue";
import CategoriesInfo from "../views/categories/Info.vue";
import CartIndex from "../views/cart/Index.vue";
import FavoriteIndex from "../views/favorite/Index.vue";
import MyIndex from "../views/my/Index.vue";
import MyProfile from "../views/my/Profile.vue";
import MyProfileIndex from "../views/my/profile/Index.vue";
import MyProfileSetting from "../views/my/profile/Setting.vue";
import MyProfilePassword from "../views/my/profile/Password.vue";
import MyProfileCards from "../views/my/profile/Cards.vue";
import MyProfileCardsIndex from "../views/my/profile/cards/Index.vue";
import MyProfileCardsAdd from "../views/my/profile/cards/Add.vue";
import MyOrders from "../views/my/Orders.vue";
import MyAddress from "../views/my/Address.vue";
import MyAddressIndex from "../views/my/address/Index.vue";
import MyAddressAdd from "../views/my/address/Add.vue";
import CartPayment from "../views/cart/Payment.vue";

const routes = [
    { 
        path: "/", 
        component: BaseLayout,
        name: 'BaseLayout',
        redirect: {name: 'Index'},
        children: [
            { 
                path: "", 
                component: Index,
                name: 'Index',
                meta: {
                    title: 'Home'
                }
            },
            { 
                path: "register", 
                component: Register,
                name: 'Register',
                meta: {
                    title: 'Sign Up'
                }
            },
            { 
                path: "login", 
                component: Login,
                name: 'Login',
                meta: {
                    title: 'Login'
                }
            },
        ]
    },
    { 
        path: "/shop", 
        component: ShopLayout,
        name: 'Shop',
        redirect: {name: 'ShopIndex'},
        children: [
            { 
                path: "", 
                component: ShopIndex,
                name: 'ShopIndex',
                meta: {
                    icon: 'location-o',
                    title: 'Lungangen'
                }
            },
            { 
                path: "info", 
                component: GoodsInfo,
                name: 'GoodsInfo',
                meta: {
                    title: ''
                }
            }
        ]
    },
    { 
        path: "/categories", 
        component: ShopLayout,
        name: 'Categories',
        redirect: {name: 'CategoriesIndex'},
        children: [
            { 
                path: "", 
                component: CategoriesIndex,
                name: 'CategoriesIndex',
                meta: {
                    title: 'Categories'
                }
            },
            { 
                path: "info", 
                component: CategoriesInfo,
                name: 'CategoriesInfo',
                meta: {
                    title: 'Categories Infomation'
                }
            }
        ]
    },
    { 
        path: "/cart", 
        component: ShopLayout,
        name: 'Cart',
        redirect: {name: 'CartIndex'},
        children: [
            { 
                path: "", 
                component: CartIndex,
                name: 'CartIndex',
                meta: {
                    title: 'Cart'
                }
            },
            { 
                path: "payment", 
                component: CartPayment,
                name: 'CartPayment',
                meta: {
                    title: 'Payment'
                }
            },
        ]
    },
    { 
        path: "/favorite", 
        component: ShopLayout,
        name: 'Favorite',
        redirect: {name: 'FavoriteIndex'},
        children: [
            { 
                path: "", 
                component: FavoriteIndex,
                name: 'FavoriteIndex',
                meta: {
                    title: 'Favorite'
                }
            }
        ]
    },
    { 
        path: "/my", 
        component: ShopLayout,
        name: 'My',
        redirect: {name: 'MyIndex'},
        children: [
            { 
                path: "", 
                component: MyIndex,
                name: 'MyIndex',
                meta: {
                    title: 'Account'
                }
            },
            { 
                path: "profile", 
                component: MyProfile,
                name: 'MyProfile',
                redirect: {name: 'MyProfileIndex'},
                children: [
                    { 
                        path: "index", 
                        component: MyProfileIndex,
                        name: 'MyProfileIndex',
                        meta: {
                            title: 'Profile'
                        }
                    },
                    { 
                        path: "setting", 
                        component: MyProfileSetting,
                        name: 'MyProfileSetting',
                        meta: {
                            title: 'Edit Profile'
                        }
                    },
                    { 
                        path: "change/password", 
                        component: MyProfilePassword,
                        name: 'MyProfilePassword',
                        meta: {
                            title: 'Change Password'
                        }
                    },
                    { 
                        path: "cards", 
                        component: MyProfileCards,
                        name: 'MyProfileCards',
                        redirect: {name: 'MyProfileCardsIndex'},
                        children: [
                            { 
                                path: "index", 
                                component: MyProfileCardsIndex,
                                name: 'MyProfileCardsIndex',
                                meta: {
                                    title: 'My Cards',
                                    btns: [
                                        {icon: 'plus', key: 'CardAdd', url: {name: 'MyProfileCardsAdd'}}
                                    ]
                                }
                            },
                            { 
                                path: "add", 
                                component: MyProfileCardsAdd,
                                name: 'MyProfileCardsAdd',
                                meta: {
                                    title: 'New Card'
                                }
                            },
                        ]
                    },
                    
                ]
            },
            { 
                path: "orders", 
                component: MyOrders,
                name: 'MyOrders',
                meta: {
                    title: 'Orders'
                }
            },
            { 
                path: "address", 
                component: MyAddress,
                name: 'MyAddress',
                redirect: {name: 'MyAddressIndex'},
                children: [
                    { 
                        path: "index", 
                        component: MyAddressIndex,
                        name: 'MyAddressIndex',
                        meta: {
                            title: 'Addresses',
                            btns: [
                                {icon: 'plus', key: 'AddressAdd', url: {name: 'MyAddressAdd'}}
                            ]
                        }
                    },
                    { 
                        path: "add", 
                        component: MyAddressAdd,
                        name: 'MyAddressAdd',
                        meta: {
                            title: 'New Addresses'
                        }
                    },
                    { 
                        path: "edit", 
                        component: MyAddressAdd,
                        name: 'MyAddressEdit',
                        meta: {
                            title: 'Edit Addresses'
                        }
                    },
                ]
            }
        ]
    },
    {
        path: '/:catchAll(.*)',
        redirect: { name: 'BaseLayout' }
    }
]

// Vue-router新版本中，需要使用createRouter来创建路由
export default  createRouter({
    history: createWebHistory(),
    routes
})